<!--
  Generated template for the ChatdetailsPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title mode="ios">{{chatUserName}}</ion-title>
  </ion-navbar>

</ion-header>


<ion-content >
  <div class="message-wrap">
    <div class="message" 
        *ngFor="let m of messageList"
        [class.left]="m.userId === chatUserId"
        [class.right]="m.userId === userId"
        >
      <img [src]="m.userImgUrl" class="user-img">
      <ion-spinner name="dots" *ngIf="m.status === 'pending'"></ion-spinner>
      <div class="msg-detail">
        <div class="msg-info">
          <p>{{m.username}}&nbsp;{{m.time | relativetime}}</p>
        </div>
        <div class="msg-content">
          <p class="line-breaker">{{m.message}}</p>
        </div>
      </div>
    </div>
  </div>

</ion-content>

<ion-footer no-border [style.height]="isOpenEmojiPicker ? '255px':'55px'">
  <ion-grid class="input-wrap">
    <ion-row>
      <ion-col col-2>
         <button ion-button clear ion-only item-right (click)="swithEmojiPicker()">
           <ion-icon name="md-happy"></ion-icon>
         </button>
      </ion-col>
      <ion-col col-8>
        <ion-textarea
        #chatInput
        [(ngModel)]="editorMessage"
        (keyup.enter)="sendMessage()"
        (focus)= "focus()"
        placeholder="输入内容"
        ></ion-textarea>
      </ion-col>
      <ion-col col-2>
          <button ion-button clear ion-only item-right (click)="sendMessage()">
              <ion-icon name="send"></ion-icon>
          </button>
      </ion-col>
    </ion-row>
  </ion-grid>
  <emojipicker *ngIf="isOpenEmojiPicker" [(ngModel)]="editorMessage"></emojipicker>
</ion-footer>